﻿@using Syncfusion.Blazor.Popups;
@using Syncfusion.Blazor.Buttons;

@namespace BlazorDemos.Shared

@inject SampleService SampleService;
@inject NavigationManager UriHelper;

@if (SampleService.IsDevice && DeviceMode)
{
    <div class='sb-mobile-footer e-view sample-navigation' id='mobile-footer'>
        <SfButton ID="mobile-prev-sample" Disabled="@isFirstSample" IsPrimary="true" CssClass="@PREV_CLASS" OnClick="OnPrevClick">PREVIOUS</SfButton>
        <SfButton ID="mobile-next-sample" Disabled="@isLastSample" IsPrimary="true" CssClass="@NEXT_CLASS" OnClick="OnNextClick">NEXT</SfButton>
    </div>
}
else if (isDesktop)
{
<div id="navigation-btn">
    <SfTooltip OpensOn="Hover Click" ID="next-tooltip" Content="Next Sample" @ref="NextTooltipRef" Target=".sb-icon-next" Position="Position.BottomCenter">
        <SfButton ID="next-sample" Disabled="@isLastSample" IsPrimary="true" IconCss="@NEXT_ICON" OnClick="OnNextClick"></SfButton>
    </SfTooltip>
    <SfTooltip OpensOn="Hover Click" ID="prev-tooltip" Content="Previous Sample" @ref="PrevTooltipRef" Target=".sb-icon-previous" Position="Position.BottomCenter">
        <SfButton ID="prev-sample" Disabled="@isFirstSample" IsPrimary="true" IconCss="@PREV_ICON" OnClick="OnPrevClick"></SfButton>
    </SfTooltip>
</div>
}

@code {
    const string NEXT_ICON = "sb-icons sb-icon-next";
    const string PREV_ICON = "sb-icons sb-icon-previous";
    const string NEXT_CLASS = "e-flat sb-navigation-next sb-right";
    const string PREV_CLASS = "e-flat sb-navigation-prev sb-left";

    private bool isDesktop { get; set; }
    private bool isFirstSample { get; set; }
    private bool isLastSample { get; set; }
    private bool isNavigated { get; set; }

    [CascadingParameter]
    protected MainLayout Layout { get; set; }

    [CascadingParameter]
    protected RightPaneComponent RightPane { get; set; }

    protected SfTooltip NextTooltipRef { get; set; }
    protected SfTooltip PrevTooltipRef { get; set; }

    /// <summary>
    /// Specifies the device mode for rendering logic.
    /// </summary>
    [Parameter]
    public bool DeviceMode { get; set; } = true;

    private int GetSampleIndex()
    {
        return SampleBrowser.SampleUrls.IndexOf(SampleService.SampleInfo.Url.ToLower());
    }

    /// <summary>
    /// Refresh the first and last button state based on the input.
    /// </summary>
    /// <param name="url">Current url need to be check whether it is first or last sample.</param>
    /// <param name="isStateChanged">Force re-render a component for disable the sample navigator.</param>
    public void RefreshState(string url, bool isStateChanged = false)
    {
        isFirstSample = SampleService.FirstSampleUrl == url;
        isLastSample = SampleService.LastSampleUrl == url;
        if (isStateChanged && (isFirstSample || isLastSample))
        {
            StateHasChanged();
        }
    }

    /// <summary>
    /// Re-render the sample navigator for desktop mode.
    /// </summary>
    /// <param name="isDevice">A bool value to validate whether it is device or desktop.</param>
    public void Rerender(bool isDevice)
    {
        this.isDesktop = !isDevice;
        StateHasChanged();
    }

    // Previous sample navigator click handler.
    private void OnPrevClick()
    {
        isNavigated = true;
        PrevTooltipRef?.Close();
        var sampleIndex = GetSampleIndex();
        if (sampleIndex > 0)
        {
            var themeName = SampleUtils.GetThemeName(UriHelper.Uri);
            var prevSample = SampleBrowser.SampleUrls[sampleIndex - 1];
            this.RefreshState(prevSample);
            if (themeName != null)
            {
                prevSample += "?theme=" + themeName;
            }
            UriHelper.NavigateTo(prevSample);
        }
        RightPane?.TabSelectedItemChange();
    }

    // Next sample navigator click handler.
    private void OnNextClick()
    {
        isNavigated = true;
        NextTooltipRef?.Close();
        var sampleIndex = GetSampleIndex();
        var themeName = SampleUtils.GetThemeName(UriHelper.Uri);
        var nextSample = SampleBrowser.SampleUrls[sampleIndex + 1];
        this.RefreshState(nextSample);
        if (themeName != null)
        {
            nextSample += "?theme=" + themeName;
        }
        UriHelper.NavigateTo(nextSample);
        RightPane?.TabSelectedItemChange();
    }

    protected override void OnInitialized()
    {
        base.OnInitialized();
        SampleService.FirstSampleUrl = SampleBrowser.SampleList.First().Samples.First().Url;
        SampleService.LastSampleUrl = SampleBrowser.SampleList.Last().Samples.Last().Url;
    }

    protected override void OnAfterRender(bool firstRender)
    {
        base.OnAfterRender(firstRender);
        if (firstRender)
        {
            this.RefreshState(SampleService.SampleInfo?.Url);
            if (isFirstSample || isLastSample)
            {
                StateHasChanged();
            }
        }
        if (isNavigated)
        {
            isNavigated = false;
            SampleService.Update(UriHelper);
            Layout.LeftPaneRef.NavMenuRef.SelectItem(SampleService.SampleInfo);
        }
    }
}
